/**
 * Created by mapbar_front on 2019/7/26.
 */
import React,{Component,Suspense} from 'react';
import {
    BrowserRouter as Router,
    Link,
    Route,
} from 'react-router-dom';
import Context from './../pages/Context';
import Contexts from './../pages/Contexts';
import Context1 from './../pages/Context1';
import Context2 from './../pages/Context2';
import Context3 from './../pages/Context3';
import ErrorExample from './../pages/ErrorExample';
import Refs from './../pages/Refs';
import Refs2 from './../pages/Refs2';
import Ref3 from './../pages/Ref3';
import Ref4 from './../pages/Ref4';
import RefsHoc from './../pages/RefsHoc';
import Ref11 from './../pages/Ref11';
import Ref12 from './../pages/Ref12';
import Ref13 from './../pages/Ref13';
import Ref15 from './../pages/Ref15';
import Ref16 from './../pages/Ref16';
import FancyButton from './../pages/RefHoc';
import FragMents from './../pages/FragMents';
import Hoc from './../pages/Hoc';
import Hoc1 from './../pages/Hoc1';
import Hoc2 from './../pages/Hoc2';
import Hoc3 from './../pages/Hoc3';
import Hoc4 from './../pages/Hoc4';
import Hoc5 from './../pages/Hoc5';
import Hoc6 from './../pages/Hoc6';
import HocBlogPost from './../pages/HocBlogPost';
import DevTools from './../pages/DevTools';
import ThirdParty from './../pages/ThirdParty';
import DeepJSX from './../pages/DeepJSX';
import Performance from './../pages/Performance';
import Portals from './../pages/Portals';
import Portals1 from './../pages/Portals1';
import NoES6 from './../pages/NoES6';
import NoJsx from './../pages/NoJsx';
import RefsDOM from './../pages/RefsDOM';
import RefsDom1 from './../pages/RefsDom1';
import RefsDom2 from './../pages/RefsDom2';
import RefsDom3 from './../pages/RefsDom3';
import RenderProps from './../pages/RenderProps';
import RenderProps1 from './../pages/RenderProps1';
import RenderProps2 from './../pages/RenderProps2';
import RenderProps3 from './../pages/RenderProps3';
import StrictMode from './../pages/StrictMode';
import Proptypes from './../pages/Proptypes';
import LifeCycle from './../pages/LifeCycle';
import Context827 from './../pages/Context827';
import Promise from './../pages/Promise';

const Home = React.lazy(()=>import('./../pages/Home'));

const routes = [
    {
        path:'/',
        exact: true,
        component: Home,
    },{
        path:'/context',
        component: Context,
    },{
        path:'/contexts',
        component: Contexts,
    },{
        path:'/context1',
        component: Context1,
    },{
        path:'/context2',
        component: Context2,
    },{
        path:'/context3',
        component: Context3,
    },{
        path:'/error',
        component: ErrorExample,
    },{
        path:'/refs',
        component: Refs,
    },{
        path:'/refs2',
        component:Refs2,
    },{
        path: '/ref3',
        component: Ref3,
    },{
        path:'/ref4',
        component:Ref4,
    },{
        path:'/ref11',
        component: Ref11,
    },{
        path:'/ref12',
        component:Ref12,
    },{
        path:'/ref13',
        component:Ref13,
    },{
        path:'/ref15',
        component:Ref15,
    },{
        path:'/ref16',
        component:Ref16,
    },{
        path:'/refshoc',
        component: RefsHoc,
    },{
        path:'/refhoc',
        component: FancyButton,
    },{
        path:'/fragments',
        component:FragMents
    },{
        path:'/hoc',
        component:Hoc
    },{
        path:'/hoc1',
        component:Hoc1,
    },{
        path:'/hoc2',
        component:()=><Hoc2 name='tianxia' age="18"/>,
    },{
        path:'/hoc3',
        component:Hoc3,
    },{
        path:'/hoc4',
        component:Hoc4
    },{
        path:'/hoc5',
        component:Hoc5
    },{
        path:'/hoc6',
        component:()=><Hoc6 name="王晓"/>
    },{
        path:'/hocblogpost',
        component:()=><HocBlogPost/>
    },{
        path:'/devtools',
        component: ()=><DevTools/>
    },{
        path:'/thirdparty',
        component:ThirdParty,
    },{
        path:'/deepjsx',
        component:()=><DeepJSX storyType="child1"/>,
    },{
        path:'/performance',
        component: Performance
    },{
        path:'/portals',
        component:Portals,
    },{
        path:'/portals1',
        component: Portals1
    },{
        path:'/noes6',
        component: ()=><NoES6 initialCount="123456"/>,
    },{
        path:'/nojsx',
        component: NoJsx
    },{
        path:'/refsdom',
        component: RefsDOM
    },{
        path:'/refsdom1',
        component:RefsDom1
    },{
        path:'/refsdom2',
        component:RefsDom2
    },{
        path: '/refsdom3',
        component:RefsDom3,
    },{
        path: '/renderprops',
        component: RenderProps,
    },{
        path: '/renderprops1',
        component: RenderProps1,
    },{
        path: '/renderprops2',
        component: RenderProps2,
    },{
        path: '/renderprops3',
        component: RenderProps3,
    },{
        path:'/strictmode',
        component:StrictMode
    },{
        path:'/proptypes',
        component:()=><Proptypes>hha</Proptypes>,
    },{
        path:'/lifecycle',
        component: LifeCycle
    },{
        path:'/context827',
        component: Context827,
    },{
        path:'/promise',
        component:Promise
    }
]

class RouterMap extends Component{
    render(){
        return(
            <Router>
                <ul style={{height: 300,overflow:'auto'}}>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/context">Context</Link></li>
                    <li><Link to="/contexts">Contexts</Link></li>
                    <li><Link to="/context1">Context1</Link></li>
                    <li><Link to="/context2">Context2</Link></li>
                    <li><Link to="/context3">Context3</Link></li>
                    <li><Link to="/error">ErrorExample</Link></li>
                    <li><Link to="/refs">Refs</Link></li>
                    <li><Link to="/refs2">Refs2</Link></li>
                    <li><Link to="/ref3">Ref3</Link></li>
                    <li><Link to="/ref4">Ref4</Link></li>
                    <li><Link to="/refshoc">RefsHoc</Link></li>
                    <li><Link to="/refhoc">RefHoc</Link></li>
                    <li><Link to="/ref11">Ref11</Link></li>
                    <li><Link to="/ref12">Ref12</Link></li>
                    <li><Link to="/ref13">Ref13</Link></li>
                    <li><Link to="/ref15">Ref15</Link></li>
                    <li><Link to="/ref16">Ref16</Link></li>
                    <li><Link to="/fragments">FragMents </Link></li>
                    <li><Link to="/hoc">Hoc</Link></li>
                    <li><Link to="/hoc1">Hoc1</Link></li>
                    <li><Link to="/hoc2">Hoc2</Link></li>
                    <li><Link to="/hoc3">Hoc3</Link></li>
                    {/*<li><Link to="/hoc4">Hoc4</Link></li>*/}
                    <li><Link to="/hoc5">Hoc5</Link></li>
                    <li><Link to="/hoc6">Hoc6</Link></li>
                    <li><Link to="/hocblogpost">HocBlogPost</Link></li>
                    <li><Link to="/devtools">DevTools</Link></li>
                    <li><Link to="/thirdparty">ThirdParty</Link></li>
                    <li><Link to="/deepjsx">DeepJSX</Link></li>
                    <li><Link to="/performance">Performance</Link></li>
                    <li><Link to="/portals">Portals</Link></li>
                    <li><Link to="/portals1">Portals1</Link></li>
                    <li><Link to="/noes6">NoES6</Link></li>
                    <li><Link to="/nojsx">NoJsx</Link></li>
                    <li><Link to="/refsdom">RefsDOM</Link></li>
                    <li><Link to="/refsdom1">RefsDom1</Link></li>
                    <li><Link to="/refsdom2">RefsDom2</Link></li>
                    <li><Link to="/refsdom3">RefsDom3</Link></li>
                    <li><Link to="/renderprops">RenderProps</Link></li>
                    <li><Link to="/renderprops1">RenderProps1</Link></li>
                    <li><Link to="/renderprops2">RenderProps2</Link></li>
                    <li><Link to="/renderprops3">RenderProps3</Link></li>
                    <li><Link to="/strictmode">StrictMode</Link></li>
                    <li><Link to="/proptypes">Proptypes</Link></li>
                    <li><Link to="/lifecycle">LifeCycle</Link></li>
                    <li><Link to="/context827">Context827</Link></li>
                    <li><Link to="/promise">Promise</Link></li>
                </ul>
                <Suspense fallback={<div>正在加载中。。。</div>}>
                    {
                        routes.map((route,i)=>{
                            return <Route
                                key={i}
                                exact={route.exact}
                                path={route.path}
                                component={route.component}
                            />
                        })
                    }
                </Suspense>
            </Router>
        )
    }
}
export default RouterMap;



